<!-- 路由网关节点组件 -->
<template>
  <div class="Route">

    <div class="node-container">
      <div class="add-branch-btn">
        <a-button type="outline" shape="round" style="" @click.stop="addBranchNode">添加分支</a-button>
      </div>


      <div class="node-branchs">
        <div class="node-horizontal-branch" v-for="(branchItem, index) in data.getBranchs()" :class="index==0?'node-horizontal-first-branch':index==data.getBranchs().length-1?'node-horizontal-last-branch':''"
          :key="(data.getNodeId()+(index as any)) ">
          <div class="horizontal-branch-container" :class="index==0?'branch-container-first':index==data.getBranchs().length-1?'branch-container-last':''">
            <div class="node-branch-item" v-for="(item, index2) in branchItem" :key="item.getNodeId() as string" :class="index2==branchItem.length-1&&'node-branch-last-item'" >
            <component @click="setSelectedRouteNode($event,item)" :route-node="data" :is="(NodeComponentsMap[item.getNodeType()])" ref="nodes" :data="item" :nodeList="branchItem"
              style="position:reactive;z-index:2" />
          </div>
          </div>
        </div>

      </div>

 
    </div>
 
    <nextArrowAdd :before-node="data"></nextArrowAdd>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted,inject } from 'vue'
import type { PropType, Component, Ref } from 'vue';
import BaseFlowNode from '../../class/BaseFlowNode';
import nextArrowAdd from '../component/next-arrow-add.vue';
import RouteNode from '../../class/flow-nodes/RouteNode';
import { NodeComponentsMap } from '../index';
import { FlowNodeType } from '../../types';
import ParallelNode from '../../class/flow-nodes/ParallelNode';
import ExclusiveNode from '../../class/flow-nodes/ExclusiveNode';
import TolerateNode from '../../class/flow-nodes/TolerateNode';
let addRouteNodeBranch=inject('addRouteNodeBranch') as any
let setSelectedNode = inject('setSelectedNode') as any

function setSelectedRouteNode($event,node:BaseFlowNode){
  $event.stopPropagation()
  setSelectedNode(node)
}


let props = defineProps({
  data: {
    type: Object as PropType<RouteNode<BaseFlowNode>>,
    default: () => {
      return {}
    }
  },
    //当前支路径下的所有节点
    nodeList: {
    type: Array as PropType<Array<BaseFlowNode>>,
    default: () => {
      return []
    }
  }
})
let nodes: Ref<Array<Component> | null> = ref(null) // 节点组件实例

function addBranchNode(){
  switch (props.data.getBranchs()[0][0].getNodeType()) {
    case FlowNodeType.PARALLEL:
    addRouteNodeBranch(props.data,new ParallelNode());
    break;
    case FlowNodeType.EXCLUSIVE:
    addRouteNodeBranch(props.data,new ExclusiveNode());
    break;
    case FlowNodeType.TOLERATE:
    addRouteNodeBranch(props.data,new TolerateNode());
    break;
  }

}

</script>
<style scoped lang="less">
@import url('../../styles/index.less');

.Route {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;

  // border: 1px solid #d9d9d9;

  // margin-top: 10px;
}

.node-container {
  display: flex;

  justify-content: center;
  position: relative;
  background-color: @main-bgc;
  // border: 1px solid red;

}

.node-container::before {
  content: '';
  width: calc(100% - @node-width - @node-branch-item-paddingLeft - @node-branch-item-paddingRight);
  background: #CACACA;
  position: absolute;
  height: 2px;
}

.node-container::after {
  content: '';
  width: calc(100% - @node-width - @node-branch-item-paddingLeft - @node-branch-item-paddingRight);
  background: #CACACA;
  position: absolute;
  height: 2px;
  bottom: 0;
}

.add-branch-btn {

  top: -16px;
  position: absolute;
}


/deep/ .arco-btn {
  background-color: white !important;
  border-color: #dcdfe6 !important;
  color: black !important;
}

/deep/ .arco-btn:hover {
  color: #268ffa !important;
  border-color: #268ffa !important;
}

.node-branchs {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: @node-branch-zIndex;
}

.node-horizontal-branch {
  padding: @node-branch-item-paddingTop @node-branch-item-paddingLeft @node-branch-item-paddingBottom @node-branch-item-paddingRight;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  height: 100%;

}


.node-horizontal-branch::after {
  top: 0;
  content: '';
  position: absolute;
  background: #CACACA;
  height: 100%;
  width: 2px;
}
.node-horizontal-first-branch::before {
  content: '';
    position: absolute;
    height: 2px;
    width: 50%;
    top: 0;
    background: @main-bgc;
    left: -1px;
}
.node-horizontal-last-branch::before {
  content: '';
    position: absolute;
    height: 2px;
    width: 50%;
    top: 0;
    background: @main-bgc;
    right: -1px;
}

.horizontal-branch-container{
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-top: 60px;
  height: 100%;
}

.branch-container-first::after {
  content: '';
    position: absolute;
    height: 2px;
    width: 50%;
    bottom: 0;
    background: @main-bgc;
    left: -1px;
}
.branch-container-last::after {
  content: '';
    position: absolute;
    height: 2px;
    width: 50%;
    bottom: 0;
    background: @main-bgc;
    right: -1px;
}


 .node-branch-item {
  display: flex;
  justify-content: center;
  position: relative;
  
}

</style>